<template>
	<view class="wrap">
		<u-tabs :list="tab" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<u-card title="活动列表" sub-title="" thumb="thumb">
			<view class="" slot="body" v-for="(item, index) in list" :key="index" @click="showDetail(item)">
				<!-- #ifndef MP-WEIXIN -->
				<u-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></u-lazy-load>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="demo-img-wrap">
					<image class="demo-image" :src="item.img" mode="widthFix"></image>
				</view>
				<!-- #endif -->
				<view class="demo-title">
					<u-icon name="order" color="#2979ff" size="26" style="margin:0 20rpx;"></u-icon>
					{{item.name}}
				</view>
				<view class="demo-price">
					<u-icon name="bell" color="#2979ff" size="28" style="margin:0 20rpx;"></u-icon>
					{{item.endTime}}
				</view>
				<view class="demo-tag">
					<u-tag :text="getStatusText(item.status)" mode="dark" />
				</view>
				<view class="demo-shop">
					<u-icon name="map" color="#2979ff" size="28" style="margin:0 20rpx;"></u-icon>
					{{item.local}}
				</view>
				<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>

			</view>
		</u-card>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		<u-popup v-model="showPopup" mode="center" width="90%" height="90%" closeable mask>
			<view class="demo-img-wrap" style="margin-top: 60rpx;">
				<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
				<image class="demo-image" :src="this.selectedDetail.img" mode="widthFix"></image>
			</view>
			<view style="font-size: 40rpx;margin: 20rpx;">
				{{this.selectedDetail.name}}
			</view>
			<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
			<view style="font-size: 26rpx;">
				<u-icon name="error" color="#2979ff" size="38" style="margin:0 20rpx;"></u-icon>
				{{this.selectedDetail.endTime}}~{{this.selectedDetail.startTime}}
			</view>
			<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
			<view>
				<u-icon name="map" color="#2979ff" size="38" style="margin:0 20rpx;"></u-icon>
				{{this.selectedDetail.local}}
			</view>
			<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
			<view>
				<u-icon name="phone" color="#2979ff" size="38" style="margin:0 20rpx;"></u-icon>
				{{this.selectedDetail.phone}}
			</view>
			<u-line color="#ecede3" style="margin:20rpx 30rpx;"></u-line>
			<view style="margin: 0 20rpx;">
				<u-icon name="tags-fill" color="#2979ff" size="38" style="margin-right:20rpx ;"></u-icon>
				{{this.selectedDetail.info}}
			</view>
			<u-button v-if="this.selectedDetail.status==2" :disabled="buttonStatus" :ripple="true" ripple-bg-color="#5555ff" style="margin-top: 40rpx;" @click="signUpActive()">{{this.buttonStatus?"已经报名":"点击报名"}}</u-button>
			<u-button v-else="" :disabled="true" :ripple="true" ripple-bg-color="#5555ff" style="margin-top: 40rpx;" @click="signUpActive()">无法报名时间已过</u-button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				userInfo: "",
				showPopup: false,
				selectedDetail: [],
				tab: [{
					name: '已结束'
				}, {
					name: '进行中'
				}, {
					name: '报名中'
				}],
				list: [],
				current: 0,
				buttonStatus: false,
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			getList() {
				this.getUserInfo();
				this.$H.get('active/list', {
					status: this.current
				}).then(res => {
					if (res.code == 0) {
						this.list = res.result
					}
				})
			},
			getUserInfo() {
				this.$H.get('user/userInfo').then(res => {
					this.userInfo = res.result;
				});
			},
			showDetail(item) {
				this.selectedDetail = item;
				this.$H.get('active/signinfo', {
					user_id: this.userInfo.uid,
					active_id: this.selectedDetail.aid,
				}).then(res => {
					if (res.code == 0 && res.result != null) {
						this.buttonStatus = true;
					}
				})
				this.showPopup = true;
			},
			change(index) {
				this.list = [];
				this.$H.get('active/list', {
					status: index
				}).then(res => {
					if (res.code == 0) {
						this.list = res.result
					}
				}).catch(error => {
					console.error('请求错误:', error);
				});
				this.current = index;
			},
			signUpActive() {
				if (!this.buttonStatus) {
					this.$H.get('active/signup', {
						user_id: this.userInfo.uid,
						active_id: this.selectedDetail.aid
					}).then(res => {
						this.showPopup =false;
						this.$u.toast('报名成功');
						this.getList();
					});
				} 
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			getStatusText(status) {
				switch (status) {
					case '0':
						return '已结束';
					case '1':
						return '进行中';
					case '2':
						return '报名中';
					default:
						return '未知';
				}
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		float: right;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.demo-price {
		font-size: 26rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
